@{block #content}

    <script>

        var people = {

            "timeout" : 0,
//            "spinner" : $('<img src="{!$basePath}/images/spinner_150.gif" class="spinner150" alt="Loading" />'),

            "information" : function() {
                var info = {};
                $.each($(".person_field"), function(i,v) {
                    info[$(v).attr("id")] = $.trim($(v).val());
                });
                return { "info" : info };
            },

            "toggle_select" : function(picture) {

                var previously_selected = picture.hasClass("selected");
                $(".picture").removeClass("selected");
                if (previously_selected) {
                    $(picture).removeClass("selected");
                } else {
                    $(picture).addClass("selected");
                }

                $.each($(picture).children("div"), function(i, info_field) {
                    var id = $(this).attr("id");
                    var content = $(this).html();
                    
                    if (id == "photo_person") {
                        id = "photo_person_hidden";
                    }
                    if (content) {
                        if (previously_selected) {
                            $("#frm-newUserForm").find("input#" + id).val("");
                        } else {
                            $("#frm-newUserForm").find("input#" + id).val(content);
                        }
                    }
                });
            },

            "search_link" : {link search!},

        };

        $(document).ready(function() {

            $(".picture").live("click", function() {
                people.toggle_select($(this));
            });

            // does not work for IE < 9, check http://stackoverflow.com/questions/6488171/catch-only-keypresses-that-change-input/6490241#6490241
            $("input").bind("input", function() {
                clearTimeout(people.timeout);

                $(this).addClass("user_changed");

                // ajax only when no person is selected from list
                if ($(".selected").length == 0) {
                    people.timeout = setTimeout(function(){
                        $("input:not(.user_changed, :submit)").val("");
                        people.information();
                        $.getJSON(
                            people.search_link,
                            people.information(),
                            function(payload) {
                                $.nette.success(payload); //rendering snippets
                            }
                        );
                    }, 500);
                }
            });
            
        });
        

    </script>

    <a href="{link Default:default}" >{!_"Back"}</a>
    <hr class="cleaner" />

    {control newUserForm}

    {snippet pictures}
        
        <div class="pictures" n:ifset="$contacts">
            {foreach $contacts as $source => $source_contacts}
                {foreach $source_contacts as $person}
                    <div class="picture">
                        <img src="{$person->getProfilePicture()}" />
                        {foreach $contact_items as $item}
                            <div class="hidden_info" id="{$item}">{$person->getInfoField($item)}</div>
                        {/foreach}
                    </div>
                {/foreach}
            {/foreach}
        </div>
        
    {/snippet}

    <style type="text/css">
        .picture {
            cursor: pointer;
            float: left;
            padding: 10px;
            margin: 20px;
            border: 1px solid #D0D0D0;
            min-height: 300px;
            min-width: 180px;
            background-color: white;
        }

        .hidden_info {
            display: none;
        }

        .selected {
            background-color: #cccccc;
        }
    </style>

{/block}